<template>
  <div class="home">
    <myHeader title="home页面" @ftn="homeFtn"></myHeader>

    <p ref="domp" v-for="(item, index) in 10">
      计算属性： 商品做活动原价：{{ price }} 现价是打八折 {{ money }}
    </p>
    <p>方法： 商品做活动原价：{{ price }} 现价是打八折 {{ ftnNum() }}</p>
    <p>watch监听： 商品做活动原价：{{ price }} 现价是打八折 {{ nowPrice }}</p>
    <p>小明{{ age }}成年了</p>
    <button @click="age++">++</button>
  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from "../components/myHeader.vue";
export default {
  name: "HomeView",
  components: {
    myHeader,
  },
  data() {
    return {
      price: 200,
      nowPrice: 0,
      age: 18,
    };
  },
  computed: {
    // 会缓存结果，只要相关变量不发生改变，计算属性就不会重新执行
    money() {
      console.log("我被执行了");
      return this.price * 0.8;
    },
  },
  watch: {
    price() {
      console.log("watch触发了");
      this.nowPrice = this.price * 0.8;
    },
  },
  methods: {
    // add(a,b){ // 做参数的累加
    //   return a+b
    // }
    homeFtn() {
      // alert('111')
      console.log(this.$refs.domp[2]);
    },
    ftnNum() {
      console.log("方法触发了");
      return this.price * 0.8;
    },
  },
};
</script>
